*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.daimacangku{
    font-size: 1.3rem;
    text-align: center;
    width: 100px;
    margin: 0 auto;
    display: block;
}
.container{
    width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    height: 900px;
    /* background-color: #3ffbff; */
}
h1{
    width: 100px;
    margin: 0 auto;
    font-size: 3rem;
    font-weight: 100;
    text-align: center;
    margin-top: 20px;
}
.level{
    width: 300px;
    margin: 0 auto;
    /* text-align: center; */
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* background-color: #0332fe; */
}
.level button{
    padding:5px 15px;
    margin: 5px;
    background-color: blue;
    color: aliceblue;
    outline: none;
    border: none;
    cursor: pointer;
    width: 100px;
    
}
.level>button.active{
    background-color: rgb(28, 123, 232) ;
}
.info{
    text-align: center;
    font-size: 1.2rem;
}
table{
    background-color: #929196;
    margin: 0 auto;
}
table td{
    width: 26px;
    height: 26px;
    background-color: #ccc;
    border: 2px solid; 
    border-color:#fff #a1a1a1 #a1a1a1 #fff ;
    cursor: pointer;
    text-align: center;
    line-height: 26px;
    font-weight: bold;
}
td>div{
    width: 100%;
    height: 100%;
}
td>div.mine{
    background: #ccc url("./image/地雷.png") ;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
}
td>div.flag{
    background: #ccc url("./image/flag.png") ;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
}
td>div.error{
    background-color: red;
}
td>div.right{
    background-color: green;
}
td>div.zero{
    background-color:white;
    border-color: #d9d9d9;
    
}
td>div.one{
    background: #d9d9d9;
    border-color: #d9d9d9;
    color: #0332fe;
}
td>div.two{
    background: #d9d9d9;
    border-color: #d9d9d9;
    color: #019f02;
}
td>div.three{
    background: #d9d9d9;
    border-color: #d9d9d9;
    color: red;
}
td>div.four{
    background: #d9d9d9;
    border-color: #d9d9d9;
    color: #93280f;
}
td>div.five{
    background: #d9d9d9;
    border-color: #d9d9d9;
    color: #ff7f29;
}
td>div.six{
    background: #d9d9d9;
    border-color: #d9d9d9;
    color: #ff32ff;
}
td>div.seven{
    background: #d9d9d9;
    border-color: #d9d9d9;
    color: #3ffbff;
}
td>div.eight{
    background: #d9d9d9;
    border-color: #d9d9d9;
    color: #22ee0f;
}

